<script setup lang="ts">
import timebar from '../../components/timebar/index.vue'
import { ref,onMounted } from 'vue'
import { reportList,getTableData,tableExport } from '../../apis/datereport'
import {getTimeObject} from "../../utils/charts";
import type { TabsPaneContext } from 'element-plus'

const editableTabsValue = ref('')
//标签页
const editableTabs = ref([])
// 时间选择数据
const timeOptions = ref({});
//当前选择标签页
const currentTab = ref({});
// 时间变化处理
const timeBarChange = (timer: any) => {
  timeOptions.value = timer;
};
//表头
const tableHeader = ref([]);
//表格数据
const table  = ref([]);
const getReportList = async () =>{
  const res = await reportList();
  if(res.data.code==200){
    editableTabs.value = res.data.data;
    editableTabsValue.value = res.data.data.length;
  }
}
const fetchTableData = async ()=>{
  console.log(currentTab);
  const params = {
    templateId: currentTab.value.props.name,
    ...getTimeObject(timeOptions.value)
  }
  const res = await getTableData(params);
  console.log(res);
  if(res.data.code == 200){
    tableHeader.value = res.data.data.header;
    table.value = res.data.data.tableData;
  }
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab);
  currentTab.value = tab;
  fetchTableData();
}

const download = async ()=>{
  await tableExport(table.value,"基础报表");
}

onMounted(async ()=>{
  await getReportList();
})

</script>

<template>
  <div>
    <!-- 页面导航面包屑 -->
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>
        <icon-menu-unfold />
      </a-breadcrumb-item>
      <a-breadcrumb-item>数据报表</a-breadcrumb-item>
      <a-breadcrumb-item>基础报表</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- 设备选择和时间切换区域 -->

    <a-card style="position: relative; padding-right: 220px;"> <!-- 预留右侧空间 -->
      <a-row justify="space-between" align="middle">
        <!-- 设备选择标签页 -->
        <el-tabs
            v-model="editableTabsValue"
            type="card"
            class="demo-tabs"
            style="width: 100%;"
            @tab-click="handleClick"
        >
          <el-tab-pane
              v-for="item in editableTabs"
              :key="item.id"
              :label="item.reportName"
              :name="item.id"
          >
            <el-table :data="table" style="width: 100%">
              <el-table-column v-for="header in tableHeader" :prop="header.dataIndex" :label="header.title"/>
            </el-table>

          </el-tab-pane>
        </el-tabs>
      </a-row>

      <!-- 绝对定位的右侧组件 -->
      <div style="position: absolute; top: 16px; right: 16px;">
        <a-space>
          <timebar @change="timeBarChange" isCurrentDateDisabled />
          <a-button type="primary" @click="fetchTableData">查询</a-button>
          <a-button type="primary" @click="download">下载</a-button>
        </a-space>
      </div>
    </a-card>

  </div>
</template>

<style scoped lang="less">

</style>

